<link href="/classico/public/assets/all-site/css/jquery-ui.min.css"
      rel="stylesheet" type="text/css"/>
<link href="/classico/public/assets/front-end/css/shopping-cart/index.css"
      rel="stylesheet" type="text/css"/>
<script type="text/javascript"
        src="/classico/public/assets/all-site/js/jquery-ui.min.js"></script>
<div id="shopping-cart">
    <div id="shopping-cart-title">
        <h3>SHOPPING CART</h3>
        <a href="/classico/public/shopping-cart/order">
            <input id="btn-order" type="button" value="ORDER"/>
        </a>
    </div>
    <div class="system-messages">
        <ul>
            <?php
            $messages = $this->messages;
            foreach ($messages as $message) :
                ?>
                <li><?= $message ?></li>
            <?php
            endforeach
            ?>
        </ul>
    </div>
    <label><input id="shopping-cart-name" type="text" value="<?= $this->name ?>"/></label>
    <input id="btn-change-cart-name" type="button" value="OK"/>

    <div class="datagrid">
        <table>
            <tr>
                <th>Name</th>
                <th class="center">Image</th>
                <th>Price</th>
                <th>Amount</th>
                <th width="10%">Total</th>
                <th class="center">Delete</th>
            </tr>
            <?php
            /** @var ProductItem[] $productItems */
            $productItems = $this->productItems;
            foreach ($productItems as $index => $productItem) :
                ?>
                <tr class="<?= ($index % 2 == 0) ? 'alt' : '' ?> product-item">
                    <td><?= $productItem->Name ?></td>
                    <td class="center">
                        <img src="<?= JImageDB::getImageURL($productItem->Image) ?>"/>
                    </td>
                    <td><?= $productItem->Price ?></td>
                    <td class="product-item-amount">
                        <label>
                            <input type="hidden" value="<?= $productItem->ID ?>"/>
                            <input type="text" value="<?= $productItem->Amount ?>"/>
                        </label>
                    </td>
                    <td class="product-item-total-cost"><?= $productItem->TotalCost ?></td>
                    <td class="center">
                        <div class="delete-icon tool-icon"></div>
                        <form action="/classico/public/shopping-cart/delete-product"
                              method="post">
                            <input type="hidden" name="productItemID"
                                   value="<?= $productItem->ID ?>"/>
                        </form>
                    </td>
                </tr>
            <?php
            endforeach
            ?>
        </table>
    </div>
    <div id="shopping-cart-total-cost">
        TOTAL: <span><?= $this->totalCost ?></span>$
    </div>
</div>
<script type="text/javascript">
    $('.datagrid .tool-icon').click(function () {
        $(this).parent(null).find('form').submit();
    });
</script>
<script type="text/javascript">
    function changeShoppingCartName() {
        var shoppingCartName = $('#shopping-cart-name').val();
        $.ajax({
            url: '/classico/public/shopping-cart/edit-name/format/json',
            data: {shoppingCartName: shoppingCartName},
            type: 'post',
            success: function () {
                $('#shopping-cart-name').attr('disabled', 'disabled');
                setTimeout(function () {
                    $('#shopping-cart-name').removeAttr('disabled');
                }, 1000);
            }
        });
    }

    $('#shopping-cart-name').keyup(function (event) {
        if (event.which == 13) {
            changeShoppingCartName();
        }
    });

    $('#btn-change-cart-name').click(function () {
        changeShoppingCartName();
    });
</script>
<script type="text/javascript">
    $('.product-item-amount input[type = "text"]').keyup(function (event) {
        if (event.which == 13) {
            var productItemTag = $(this).parents('.product-item');

            var productItemIDHdnTag = productItemTag
                .find('.product-item-amount input[type = "hidden"]');
            var productItemAmountTextTag = productItemTag
                .find('.product-item-amount input[type = "text"]');

            var productItemID = productItemIDHdnTag.val();
            var productItemAmount = productItemAmountTextTag.val();

            $.ajax({
                url: '/classico/public/shopping-cart/edit-product-amount/format/json',
                data: {
                    productItemID: productItemID,
                    productItemAmount: productItemAmount
                },
                type: 'post',
                success: function (data) {
                    if (data != []) {
                        productItemTag.find('.product-item-total-cost').text(
                            data['productItemTotalCost']
                        );

                        $('.product-item-amount input[type = "text"]').attr(
                            'disabled', 'disabled'
                        );
                        setTimeout(function () {
                            $('.product-item-amount input[type = "text"]').removeAttr(
                                'disabled'
                            );
                        }, 1000);

                        $('#shopping-cart-total-cost span').text(
                            data['shoppingCartTotalCost']
                        );
                    }
                }
            });
        }
    }).keypress(function (event) {
            if (event.which > 31 && (event.which < 48 || event.which > 57)) {
                return false;
            }

            return true;
        }
    );
</script>
